<template>
  <div>
    <div class="box">
      <div class="sbox">
        <el-table height="700" style="width: 100%"  :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))">
          <el-table-column label="预约姓名" prop="name"> </el-table-column>
          <el-table-column label="手机号" prop="phone"> </el-table-column>
          <el-table-column label="日期" prop="date"> </el-table-column>
          <el-table-column label="身份证号码" prop="id_card"> </el-table-column>
          <el-table-column
            label="状态"
            prop="state"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.state === '已完成' ? 'primary' : 'success'"
                disable-transitions
                >{{ scope.row.state }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, tableData)"
                >删除</el-button
              >
            </template>
          </el-table-column>
          <el-table-column align="right">
            <template slot="header" slot-scope="scope">
              <el-input
                v-model="search"
                size="mini"
                placeholder="输入名字搜索"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- delog -->
      <el-dialog
        title="用户数据"
        :visible.sync="dialogFormVisible"
        width="500px"
        :close-on-click-modal='false'
        destroy-on-close
      >
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" maxlength="8"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input v-model="form.phone" maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="身份证" prop="id_card">
            <el-input v-model="form.id_card" maxlength="18"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              v-model="svalue"
              placeholder="请选择"
              @change="selectstate($event)"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="edittables('form')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { MessageBox } from "element-ui";
export default {
  data() {
    return {
      datas:[],
      rules: {
        name: [
          { required: true, message: "请输入患者名称", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { min: 11, max: 11, message: "长度 11 个字符", trigger: "blur" },
        ],
        id_card: [
          { required: true, message: "请输入患者身份证", trigger: "blur" },
          { min: 18, max: 18, message: "长度 18 个字符", trigger: "blur" },
        ],
      },
      options: [
        {
          value: "未完成",
          label: "未完成",
        },
        {
          value: "已完成",
          label: "已完成",
        },
      ],
      rows: {},
      svalue: "",
      form: {
        name: "",
        date: "",
        id_card: "",
        state: "",
        phone: "",
      },
      formLabelWidth: "100x",
      tableData:[],
      search: "",
      dialogFormVisible: false,
    };
  },
  mounted () {
    this.getData();
  },
  methods: {
    getData(){
      this.axios.get('http://localhost:3000/hsyylist')
      .then(res => {
        res.data.data.forEach(item=>{
          item.date = this.moment.unix(item.date).format('YYYY年MM月DD日')
        })
        this.tableData = res.data.data
        console.log(this.tableData);
      })
    },
    message(){
      MessageBox.confirm("此操作将修改数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
              //进行修改操作
              this.rows.name = this.form.name;
              this.rows.phone = this.form.phone;
              this.rows.id_card = this.form.id_card;
              this.rows.state = this.svalue;
               this.dialogFormVisible = false;
            }).catch(() => {
              //取消修改操作
              console.log(0);
            });
    },
    edittables(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid)this.message()
      });
     
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogFormVisible = true;
      this.form.name = row.name;
      this.form.phone = row.phone;
      this.form.id_card = row.id_card;
      this.svalue = row.state;
      this.rows = row;
    },
    handleDelete(index, row) {
      MessageBox.confirm("此操作将删除数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //进行修改操作
          row.splice(index, 1);
        })
        .catch(() => {});
    },
    // 选择状态事件
    selectstate(e) {
      this.svalue = e;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  overflow: hidden;
}
.sbox {
  margin: auto;
  width: 98%;
}
</style>